<template>
  <div class="change-class body-bg">
    <div v-if="!initLoading">
      <div class="head-img-cont" @click="upLoadImg">
        <img class="head-img" :src="avatar || '/static/images/user.png'" alt=头像>
        <span class="head-text">修改学员头像 <van-icon name="arrow" color="#CBD2D8" size="14" /></span>
      </div>
      <ul class="infor-cont">
        <li class="items border-bottom" data-title="孩子姓名" data-type="text" data-maxlength="20" :data-value="childName" @click="goInput($event)">
          <label class="items-title required">孩子姓名</label>
          <span class="items-text">{{childName || "填写姓名"}} <van-icon name="arrow" color="#CBD2D8" size="14" /></span>
        </li>
        <li class="items border-bottom">
          <label class="items-title required">性别</label>
          <ul class="sex-cont">
            <li class="sex-items" :class="{active: sex == '1'}" @click="changeSex">男</li>
            <li class="sex-items" :class="{active: sex == '2'}" @click="changeSex">女</li>
          </ul>
        </li>
        <li class="items border-bottom">
          <label class="items-title required">生日</label>
          <span class="items-text">
            <picker mode="date" :value="birthday" @change="dateChange">
              <view class="picker">{{birthday || "请选择生日"}}</view>
            </picker>
            <van-icon name="arrow" color="#CBD2D8" size="14" />
          </span>
        </li>
        <li class="items border-bottom" data-title="身份证号" data-type="idcard" data-maxlength="18" :data-value="idCard" @click="goInput($event)">
          <label class="items-title required">身份证号</label>
          <span class="items-text">{{idCard || "填写身份证号"}} <van-icon name="arrow" color="#CBD2D8" size="14" /></span>
        </li>
        <li class="items border-bottom" data-title="身高" data-type="number" data-maxlength="" :data-value="height" @click="goInput($event)">
          <label class="items-title required">身高</label>
          <span class="items-text">{{height || "填写身高"}} <van-icon name="arrow" color="#CBD2D8" size="14" /></span>
        </li>
        <li class="items border-bottom" data-title="体重" data-type="number" data-maxlength="" :data-value="weight" @click="goInput($event)">
          <label class="items-title required">体重</label>
          <span class="items-text">{{weight || "填写体重"}} <van-icon name="arrow" color="#CBD2D8" size="14" /></span>
        </li>
        <li class="items border-bottom" data-title="衣服尺码" data-type="number" data-maxlength="" :data-value="clothingSize" @click="goInput($event)">
          <label class="items-title required">衣服尺码</label>
          <span class="items-text">{{clothingSize || "填写衣服尺码"}} <van-icon name="arrow" color="#CBD2D8" size="14" /></span>
        </li>
        <li class="items border-bottom" data-title="鞋子尺码" data-type="number" data-maxlength="" :data-value="footSize" @click="goInput($event)">
          <label class="items-title required">鞋子尺码</label>
          <span class="items-text">{{footSize || "填写鞋子尺码"}} <van-icon name="arrow" color="#CBD2D8" size="14" /></span>
        </li>
      </ul>
      <!-- submit -->
      <div class="submit-btn">
        <van-button v-if="!loadingBtn" round color="#00B8EE" block @click="submitForm">保存</van-button>
        <van-button v-else round disabled="true" :loading="loadingBtn" loading-text="保存中..." color="#00B8EE" block></van-button>
      </div>
      <!-- 通知对应的节点容器 -->
      <van-notify id="van-notify" />
    </div>
    <div v-else class="init-loading"><van-loading type="spinner" color="#1989fa" /></div>
  </div>
</template>

<script>
import Notify from '../../../static/vant/notify/notify';
export default {
  data() {
    return {
      initLoading: true, // 初始加载
      from: "", // 路由来源 1 添加孩子 2 编辑孩子
      chlidId: "",
      childName: "",
      sex: "",
      birthday: "",
      idCard: "",
      height: "",
      weight: "",
      clothingSize: "",
      footSize: "",
      avatar: "", // 上传图片的本地临时文件路径列表 (本地路径)
      loadingBtn: false,
    }
  },
  onLoad(e) {
    this.from = e.from;
    if (e.from == 'add') {
      this.initLoading = false;
      return
    }
    wx.setNavigationBarTitle({
      title: '编辑孩子'
    })
  },
  onShow() {
    if(this.from == 'edit'){
      this.chlidId = this.$store.state.childId;
      this.getShiftWorkList();
    } else {
      this.chlidId = "";
    }
    this.avatar = this.$store.state.avatar;
    this.childName = this.$store.state.childName;
    this.sex = this.$store.state.sex;
    this.birthday = this.$store.state.birthday;
    this.idCard = this.$store.state.idCard;
    this.height = this.$store.state.height;
    this.weight = this.$store.state.weight;
    this.clothingSize = this.$store.state.clothingSize;
    this.footSize = this.$store.state.footSize;
  },
  methods: {
    // 获取列表
    getShiftWorkList() {
      this.$fetch.shiftWork()
      .then(res=>{
        this.initLoading = false;
      }).catch(err=>{
        this.initLoading = false;
      })
    },
    // 添加/编辑孩子
    addEditChild() {
      let that = this;
      console.log("添加/编辑孩子")
      this.$fetch.addStudent({
        student_id: this.chlidId,
        avatar: this.$store.state.avatar,
        name: this.$store.state.childName,
        sex: this.$store.state.sex,
        birthday: this.$store.state.birthday,
        height: this.$store.state.height,
        weight: this.$store.state.weight,
        clothing_size: this.$store.state.clothingSize,
        shoe_size: this.$store.state.footSize,
      }).then(res=> {
        wx.showToast({
          title: '保存成功',
          icon: 'success',
          success: function() {
            setTimeout(() => {
              that.loadingBtn = false;
              wx.navigateBack({
                delta: 1
              })
            }, 1500);
          }
        })
      }).catch(err=> {
        this.loadingBtn = false;
      })
    },
    // 上传头像
    upLoadImg() {
      let that = this;
      wx.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success (res) {
          // tempFilePath可以作为img标签的src属性显示图片
          that.avatar = res.tempFilePaths;
          that.$store.commit("setAvatar", res.tempFilePaths);
        }
      })
    },
    // 性别
    changeSex() {
      if(this.sex == 1) {
        this.sex =2;
        this.$store.commit("setSex", 2);
      } else {
        this.sex =1;
        this.$store.commit("setSex", 1);
      }
    },
    // 选择生日
    dateChange(e) {
      this.birthday = e.mp.detail.value;
      this.$store.commit("setBirthday", e.mp.detail.value);
    },
    // 去填写信息
    goInput(e) {
      wx.navigateTo({
        url: `/pages/inputCompenent/main?title=${e.currentTarget.dataset.title}&type=${e.currentTarget.dataset.type}&value=${e.currentTarget.dataset.value}&maxlength=${e.currentTarget.dataset.maxlength}`
      })
    },
    // 提交表单
    submitForm() {
      let that = this;
      // if(!this.childName) {
      //   Notify({ type: 'warning', message: '请填写孩子姓名' });
      //   return
      // }
      // if(!this.sex) {
      //   Notify({ type: 'warning', message: '请选择性别' });
      //   return
      // }
      // if(!this.birthday) {
      //   Notify({ type: 'warning', message: '请填写生日' });
      //   return
      // }
      // if(!this.idCard) {
      //   Notify({ type: 'warning', message: '请填写身份证号码' });
      //   return
      // }
      // if(!this.height) {
      //   Notify({ type: 'warning', message: '请填写身高' });
      //   return
      // }
      // if(!this.weight) {
      //   Notify({ type: 'warning', message: '请填写体重' });
      //   return
      // }
      // if(!this.clothingSize) {
      //   Notify({ type: 'warning', message: '请填写衣服尺码' });
      //   return
      // }
      // if(!this.footSize) {
      //   Notify({ type: 'warning', message: '请填写鞋子尺码' });
      //   return
      // }
      this.loadingBtn = true;
      this.addEditChild();
    }
  },
}
</script>

<style lang="less" scope>
.change-class{
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  .head-img-cont{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 15px 12px 15px;
    box-sizing: border-box;
    background: #fff;
    margin-bottom: 25px;
    border-top: .05px solid #dcdcdc;
    .head-img{
      width: 65px;
      height: 65px;
      display: block;
      border-radius: 50%;
    }
    .head-text{
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #999;
      .van-icon{
        margin-left: 10px;
      }
    }
  }
  .infor-cont{
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
    background: #fff;
    .items{
      width: 100%;
      height: 45px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      color: #333;
      &:last-child{
        border-bottom: 0;
      }
      .sex-cont{
        display: flex;
        align-items: center;
        .sex-items{
          width: 38px;
          height: 22px;
          text-align: center;
          line-height: 22px;
          border: 0.5px solid #dcdcdc;
          margin-left: 10px;
          border-radius: 4px;
          color: #999;
          &.active{
            background: rgba(0,184,238, 0.1);
            border-color: #00B8EE;
            color: #00B8EE;
            transition: all .2s;
          }
        }
      }
      .required{
        position: relative;
        &::after{
          content: "*";
          color: #FF0000;
          position: absolute;
          right: -10px;
          top: 2px;
        }
      }
      .items-text{
        display: flex;
        align-items: center;
        color: #999;
        .van-icon{
          margin-left: 10px;
        }
      }
    }
  }
  .submit-btn{
    width: 92%;
    margin: 40px 4%;
    border-radius:5px;
  }
}
</style>
